<template>
    <div>
        <div id="editor_box" :ref="refName" class="editor-wrapper"></div>
    </div>
</template>

<script>
    import {productUpload} from '@/api/product.js'
    import E from "wangeditor"
    import compressImg from './compressImage'
    export default {
        name: 'editor',
        props:["innerhtml","upType","refName"],
        data () {
            return {
                // editorContent: ''
            }
        },
        computed:{
            editorContent(){
                return this.innerhtml
            }
        },
        watch:{
            innerhtml(newv,oldv){
                console.log('ddddd',newv,oldv)
                // if(newv){
                    // this.$ref.refName.
                    // this.editorContent = newv
                // }
            }
        },
        methods: {},
        mounted() {
            const editor = new E("#editor_box")
            // let editor = new E(this.$refs[tem]);
            editor.config.onchange = (html) => {
                this.$emit('editorChange',html)
            }
            editor.config.uploadImgTimeout = 5 * 1000
            editor.config.menus = [
                'head',
                'bold',
                'fontSize',
                'fontName',
                'italic',
                'underline',
                'strikeThrough',
                'indent',
                'lineHeight',
                'foreColor',
                'backColor',
                'link',
                'list',
                'todo',
                'justify',
                'quote',
                'emoticon',
                'image',
                'table',
                'code',
                'splitLine',
                'undo',
                'redo',
            ]
            editor.config.customUploadImg = function (files, insertImgFn) {
                compressImg.compressImg(files[0]).then(res=>{
                    let fileData = new FormData();
                    fileData.append('file', res);
                    productUpload(fileData).then((result) => {
                        if(!editor.txt.html()){
                            editor.txt.append(' ');
                        }
                        insertImgFn(result.data);
                    })
                })
            };
            editor.config.uploadImgShowBase64 = true;
            editor.config.showLinkImg = false;
            editor.create()
            console.log('hahaha',this.innerhtml)
            if(this.innerhtml){
                editor.txt.html(this.innerhtml)
            }else{
                editor.txt.html();
            }
        }
    }
</script>

<style>
    .w-e-text img{max-width:60px;max-height:60px}

</style>
